import React from 'react';
import {Row, Col,Table,Tag} from 'antd'
import * as url from '../api/cfApi'
import axios from 'axios'
import MyEchart from '../component/cf/MyEchart';
class Home extends React.Component {
  constructor() {
    super();
    this.state = {
      tubiao: {},
      yueshou: [],
      latestOrder: [],
      req: false
    }
  }
  async componentWillMount() {
    // 请求数据
    let tubiao = await axios({url: url.ECHART})
    let latestOrder = await axios({url: url.LATESTORDER})
    let yueshou = await axios({url: url.MOTHDATA})
    
    latestOrder = latestOrder.data.map(item => {
      item.key = item.order_id
      return item
    })
    console.log(latestOrder)
    await this.setState({
      tubiao:tubiao.data,
      yueshou: yueshou.data,
      latestOrder: latestOrder,
      req: true
    })
  }
  
  render() {
    let chartsList = []
    let {tubiao,yueshou,req,latestOrder} = this.state
    // 四个图表
    for (let key in tubiao) {
      let data = {}
      data.id = key
      data.title = tubiao[key].seriesName
      let option = {}
      option. tooltip= {
        trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
      }
      option.series= [
        {
          name: tubiao[key].seriesName,
          type: 'pie',
          radius: ['60%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true
            }
          },
          data: (() => {
            let arr =[]
            arr.push(tubiao[key].son)
            arr.push(tubiao[key].mother)
            return arr
          })()
        }
      ]
      data.option = option
      // let dom = <MyEchart {...data}/>
      chartsList.push(data)
    }
    // 月售
    let yueshouOption = (function createOptionOfYueshou(dataNumArr) {
      let data ={}
      let option = {
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: dataNumArr,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          }
        }]
      }
      data.option = option
      data.id = 'yueshou'
      data.title = '月销售统计'
      return data
    })(yueshou)
    // 最新订单
    let dataSource =  latestOrder
    //   .map(item => {
    //   item.key = item.id
    //   return item
    // })
    const columns = [
      {
        title: '订单id',
        dataIndex: 'order_id',
        key: 'order_id',
      },
      {
        title: '商品名称',
        dataIndex: 'order_name',
        key: 'order_name',
        ellipsis: true
      },
      {
        title: '数量',
        dataIndex: 'order_num',
        key: 'order_num',
      },
      {
        title: '下单者',
        dataIndex: 'order_people',
        key: 'order_people',
      },
      {
        title: '下单电话',
        dataIndex: 'order_tel',
        key: 'order_tel',
      },
      {
        title: '配送方式',
        dataIndex: 'send_type',
        key: 'send_type',
        render: (send_type) => {
          console.log(send_type)
          let color = send_type === '门店自提' ? 'geekblue' : 'green'
          return (
            <Tag color={color}>{send_type}</Tag>
          )
        }
      },
      {
        title: '支付时间',
        dataIndex: 'pay_time',
        key: 'pay_time',
      },
      {
        title: '订单类型',
        dataIndex: 'order_type',
        key: 'order_type',
        render: (order_type) => {
          console.log(order_type)
          let color =''
          switch (order_type) {
            case '已收货':
              color = 'green'
              break;
            case '已发货':
              color = 'geekblue'
              break;
            case '已出库':
              color = 'yellow'
              break;
            case '配送中':
              color = 'orange'
              break;
          }
          return (
            <Tag color={color}>{order_type}</Tag>
          )
        }
      },
      {
        title: '地址',
        dataIndex: 'order_add',
        key: 'order_add',
      },
    ];
    return (
      <div className='home'>
        {/*四个图表*/}
        <Row gutter={[16, 24]}>
          {chartsList.map(item => {
            let [i0,i1] = item.option.series[0].data
            let sheetStyle = {width: '80px',height: '80px'}
            return (
              <Col xl={6} md={12} xs={24} key={item.id} >
                <div style={{background: 'white',padding: '5px', height: '100px', borderRadius: '10px',display: 'flex',justifyContent:'space-between',alignItems: 'center'}}>
                  <div>
                    <p style={{color: 'black',fontSize: '18px',fontWeight: 'bold'}}>{item.title}</p>
                    <div>{i0.name}: {i0.value}</div>
                    <div>{i1.name}: {i1.value}</div>
                  </div>
                  <div className='myEchart' style={{width: '80px',height: '80px'}}>
                    <MyEchart {...item} sheetStyle={sheetStyle} />
                  </div>
                </div>
              </Col>
            )
          })}
        </Row>
        {/* 月售 */}
        <div style={{width: '100%',height: '350px',background: 'white',display: 'flex', flexDirection: 'column',justifyContent: 'center',alignItems: 'center',alignContent: 'center'}}>
          <div style={{height: '50px',lineHeight: '50px',fontSize: '18px',fontWeight: 'bold'}}>月售统计图</div>
          {req?(<MyEchart {...yueshouOption} sheetStyle={{width: '70%',height: '300px'}} />):'正在加载当中'}
        </div>
        {/* 最新订单动态 */}
        <div style={{width: '100%',height: '350px'}}>
          <div style={{height: '50px',lineHeight: '50px',fontSize: '18px',fontWeight: 'bold'}}>最新订单</div>
          <Table dataSource={dataSource} columns={columns} />;
        </div>
      </div>
    )
  }
}

export default Home;
